<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map类型的特点和声明方法</title>
</head>
<body>
    
</body>
<script>
    /*
        前面我们学习的Set类型  是和数组很像的类型 
            现在的MAp类型  是一种和对象很像的类型
        所以我们先要了解对象的特点：
            对象中的key存储的都是以字符串的形式存储的，他的key也只能是字符串
                而我们的Map类型  很强大 它的key可以是数字，方法，字符串其他类型
    */
    let obj = {
        name:'jimmy'
    }
    let obj1 = {
        1:'hello',
        '1':'ajax'
    }
    console.log(obj1) 
    /*
        {1: "ajax"}  以上结果如此
            可见 虽然我们有意的在对象中写了两种类型的1，但是对象因为只能存字符串 所以将他们归成同一种 并且覆盖了值
    */
    let obj2 = {
        obj:'hehehe'
    }
    console.log(obj2)  //{obj: "hehehe"}  对象也不会去自动解析变量
    let obj3 = {
        [obj]:'hhh'
    }
    console.log(obj3)  //{[object Object]: "hhh"}   这里的键名其实相当于obj.toString()   

    // 虽然对象类型非常非常的好用 用的也非常的多 但是不得不说   以上的问题就是对象在处理的时候比较难处理的地方  所以JS引用了Map类型

    // 初始化一个map类型数据
    let map = new Map()
    // 使用set()向Map类型中添加数据
    map.set('name','jimmy')
    console.log(map)  //Map(1) {"name" => "jimmy"}
    map.set(()=>{},'a function')
    console.log(map)  //Map(2) {"name" => "jimmy", ƒ => "a function"}
    map.set(1,'hello')
    console.log(map)  // Map(3) {"name" => "jimmy", ƒ => "a function", 1 => "hello"}
    // Map是支持链式操作的 链式操作在jQuery中是特别特别常用的
    map.set('baby','xuexue').set('mylove','zhangxue')
    console.log(map)  // Map(5) {"name" => "jimmy", ƒ => "a function", 1 => "hello", "baby" => "xuexue", "mylove" => "zhangxue"}  可以链式操作一次添加多个成员
    // 也可以在初始化的时候就插入数据
    let map2 = new Map([['name','jimmy'],['age','22']])    // Map([[key,value],[key,value],[key,value]])  是以在最外面用[]包裹起来的方式
    console.log(map2) // 也可以这样操作  Map(2) {"name" => "jimmy", "age" => "22"}
</script>
</html>